<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪元素选择器 | CSS过渡</title>
    <style>
        /*字体图标声明*/
        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?cmt4ai');
            src: url('../fonts/icomoon.eot?cmt4ai#iefix') format('embedded-opentype'),
            url('../fonts/icomoon.ttf?cmt4ai') format('truetype'),
            url('../fonts/icomoon.woff?cmt4ai') format('woff'),
            url('../fonts/icomoon.svg?cmt4ai#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .font {
            margin: 10px auto;
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
            line-height: 35px;
        }

        /*伪元素字体图标*/
        .font::after {
            /*float: right;*/
            font-family: 'icomoon';
            position: absolute;
            right: 10px;
            /*content: '';*/
            content: '\e903';
            color: #d5e8fc;

        }

        .bar {
            margin: 50px auto;
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: blue;
            border-radius: 7px;
            /*CSS transition 过渡*/
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 90%;
        }
    </style>
</head>
<body>
<!--伪元素字体图标-->
<div class="font">
    自己人：罚酒三杯.
</div>

<div class="bar">
    <div class="bar_in"></div>
</div>

</body>
</html>